<template>
	<view class="shangpinshangjia">
		<view class="top">
			<image src='../../static/businessImg/back.png' class="topback" @click="back">
			</image>
			<view class="topname">
				{{data.name}}
			</view>
		</view>


		<view class="swiper_view">
			<u-swiper :list="imgList" height='750' img-mode="scaleToFill"></u-swiper>
		</view>


		<view class="shangpinshangjiacenter">
			<view class="title123">
				{{data.name}}
			</view>

			<view class="biaoqian">
				{{data.status == 0 ? '已上架' : data.status == -1 ? '已下架' : '已售罄'}}
			</view>

			<view class="priceandnum">
				<view class="price">
					￥ {{data.price}}
				</view>
				<view class="num">
					已售{{data.sellNum || 0}}件
				</view>
			</view>

			<view class="line">

			</view>


			<view class="kucun">
				<view class="kucunleft">
					库存
				</view>
				<view class="kucunright">
					{{data.stockNum}}
				</view>
			</view>

			<!-- <view class="kucun">
				<view class="kucunleft">
					规格
				</view>
				<view class="kucunright" v-for="item in data.specifications">
					{{item.name}}
				</view>
			</view> -->

			<view class="kucun" v-for="item in data.specifications">
				<view class="kucunleft">
					规格
				</view>
				<view class="kucunright" >
					{{item.name}}
				</view>
				
				<view class="kucunleft">
					佣金价格
				</view>
				
				<view class="kucunright" >
					￥{{item.commission}}
				</view>
			</view>


			<view class="kucun">
				<view class="kucunleft">
					商品参数
				</view>
				<view class="kucunright">
					{{data.parameter}}
				</view>
			</view>


		</view>

		<view class="center">

		</view>

		<!-- 		<view class="pinglun">
			<view class="pingluntitle">
				<view class="pingluntitleleft">
					商品评价(16)
				</view>
				<view class="pingluntitleright">
					全部 <span class="accrow"></span>
				</view>
			</view>

			<view class="pinglunlist">
				<view style="display: flex;">
					<view class="pinglunlisticon">
						<u-image src="../../icon.png" mode="" width='100%' height="100%"></u-image>
					</view>
					
					<view class="pinglunname">
						123
					</view>
				</view>
				
				<view class="pinglunzhuti">
					超级好吃，宝宝还会回购的，肉质鲜嫩，食材都是很新鲜的，店家配送一百分！
				</view>
			</view>
			
			
		</view> -->

		<view class="shangpinxiangqing">
			商品详情
		</view>

		<view class="xiangqingtupian" v-for="item in detailImage">
			<img :src="item" mode="" style="width: 100%;"></img>
		</view>

		<view class="lastview">
			<view class="lastviewleft">
				<view class="lastviewlefttop">

				</view>

				<view class="lastviewleftbottom" @click="handleShangjia">
					{{data.status == '-1' || data.status == '-2' ? '产品上架' : '产品下架'}}
				</view>
			</view>

			<view class="lastviewright" @click="handleGoUpt">
				修改产品信息
			</view>
		</view>

		<u-popup v-model="popshow" mode="center" :mask-close-able="false" >
			<view class="popcenter">
				<view class="pop_title">
					是否重新上架该商品
				</view>
				
				<view class="pop_bottom_list">
					<view class="pop_bottom_list_quxiao" @click="popshow = false">
						取消
					</view>
					
					<view class="pop_bottom_list_queren" @click="goToshangjia">
						确认
					</view>
				</view>
			</view>
		</u-popup>
		
		
		
		<u-popup v-model="popshow2" mode="center" :mask-close-able="false" >
			<view class="popcenter2">
				<view class="pop_title">
					该商品已售罄 <br>
					是否修改库存重新上架
				</view>
				
				<view class="pop_cneter">
					<view class="pop_cneter_label">
						增加库存:
					</view>
					
					<view class="pop_cneter_input">
						<input type="text" v-model="num">
					</view>
				</view>
				
				<view class="pop_bottom_list">
					<view class="pop_bottom_list_quxiao" @click="popshow2 = false">
						取消
					</view>
					
					<view class="pop_bottom_list_queren" @click="goToshangjiaYishouqin">
						确认
					</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
import { proDetails, proOut } from "@/api/gongyingshang.js";
import { addStock } from "@/api/gongyingshang.js";
export default {
  data() {
    return {
      imgList: [],
      id: "",
      data: {},
      detailImage: [],
      popshow: false,
      popshow2: false,
      num: "",
      from: "",
    };
  },

  onLoad(option) {
    if (option.id) {
      this.id = option.id;
    }

    if (option.from) {
      this.from = option.from;
    }
  },

  onShow() {
    if (this.id != "") {
      this.getDetail();
    }
  },
  methods: {
    back() {
      if (this.from == "tiezi") {
        uni.navigateBack();
      } else {
        // uni.navigateTo({
        //   url: "/pages/gongyingshang/index",
        // });
		uni.navigateBack();
      }
    },

    handleGoUpt() {
      if (this.id != "") {
        uni.navigateTo({
          url: `/pages/gongyingshang/shangpinshangjia?id=${this.id}`,
        });
      }
    },

    getDetail() {
      proDetails({
        id: this.id,
      }).then((res) => {
        this.data = res.data;
        if (res.data.smallImage != "" && res.data.smallImage != null) {
          let arr = [];
          res.data.smallImage.split(",").forEach((item) => {
            arr.push({
              image: item,
            });
          });
          this.imgList = arr;
        }

        if (res.data.detailImage != "" && res.data.detailImage != null) {
          this.detailImage = res.data.detailImage.split(",");
        }
      });
    },

    goToshangjia() {
      proOut({
        id: this.id,
        status: 1,
      }).then((res) => {
        this.popshow = false;
        this.getDetail();
      });
    },

    goToshangjiaYishouqin() {
      // 先去修改

      if (this.num == "" || this.num == null || this.num == undefined) {
        return uni.showToast({
          icon: "none",
          title: "请输入数量",
        });
      }

      addStock({ id: this.id, num: this.num }).then((res) => {
        if (res.code == "000000") {
          proOut({
            id: this.id,
            status: 1,
          }).then((res) => {
            this.getDetail();
          });
        }
      });
    },

    handleShangjia() {
      const { data } = this;

      // -1 已下架 0 正常 -2 已售罄

      if (data.status == -1) {
        // 弹出是否重新上架
        this.popshow = true;
      }

      if (data.status == 0) {
        proOut({
          id: this.id,
          status: 2,
        }).then((res) => {
          this.getDetail();
        });
      }

      if (data.status == -2) {
        // 重新设定库存
        this.popshow2 = true;
      }
    },
  },
};
</script>

<style scoped>
.shangpinshangjia {
  width: 100%;
  min-height: 100vh;
  background: #ffffff;
  padding-bottom: 131rpx;
}

.top {
  width: 100%;
  height: 188rpx;
  position: relative;
  background: #ffffff;
}

.topback {
  width: 16rpx;
  height: 29rpx;
  position: absolute;
  top: 106rpx;
  left: 32rpx;
}

.topname {
  width: 300rpx;
  height: 32rpx;
  text-align: center;
  font-family: Adobe Heiti Std;
  font-weight: normal;
  font-size: 33rpx;
  color: #222222;
  line-height: 32rpx;
  position: absolute;
  top: 104rpx;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lastview {
  width: 100%;
  height: 131rpx;
  background: #ffffff;
  display: flex;
  position: fixed;
  bottom: 0;
  align-items: center;
  justify-content: space-around;
}

.lastviewleft {
  height: 85rpx;
  width: 84rpx;
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  justify-content: center;
}

.lastviewlefttop {
  width: 47rpx;
  height: 47rpx;
  background: url("../../static/businessImg/xiajia.png") no-repeat;
  background-size: 100% 100%;
}

.lastviewleftbottom {
  width: 84rpx;
  height: 20rpx;
  font-family: Adobe Heiti Std;
  font-weight: normal;
  font-size: 21rpx;
  color: #000000;
  line-height: 20rpx;
  text-align: center;
}

.lastviewright {
  width: 519rpx;
  height: 85rpx;
  background: rgb(148, 207, 57);
  text-align: center;
  line-height: 85rpx;
  font-family: Adobe Heiti Std;
  font-weight: normal;
  font-size: 41rpx;
  color: #ffffff;
  border-radius: 50rpx;
}

.title123 {
  width: 456rpx;
  height: 40rpx;
  font-family: PingFang;
  font-weight: bold;
  font-size: 29rpx;
  color: #151f38;
  line-height: 36rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.biaoqian {
  width: 88rpx;
  height: 32rpx;
  line-height: 32rpx;
  text-align: center;
  background: rgb(244, 250, 235);
  font-family: Adobe Heiti Std;
  font-weight: normal;
  font-size: 20rpx;
  color: #94cf39;
  margin-top: 19rpx;
}

.priceandnum {
  width: 100%;
  height: 34rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 19rpx;
  line-height: 34rpx;

  .price {
    width: 300rpx;
    height: 100%;
    font-family: PingFang;
    font-weight: 500;
    font-size: 23rpx;
    color: #ff3a3a;
  }

  .num {
    flex: 1;
    text-align: right;
    height: 100%;
    font-family: PingFang;
    font-weight: 500;
    font-size: 25rpx;
    color: #9da4b1;
  }
}

.shangpinshangjiacenter {
  width: 100%;
  padding: 35rpx 40rpx;
  margin-top: -41rpx;
  border-radius: 30rpx 30rpx 0 0;
  position: relative;

  background: #ffffff;
}

.line {
  width: 100%;
  height: 2rpx;
  background: #f9f9f9;
  margin-top: 26rpx;
}

.kucun {
  width: 100%;
  height: 22rpx;
  line-height: 22rpx;
  display: flex;
  align-items: center;
  margin-top: 38rpx;
}

.kucunleft {
  width: 150rpx;
  font-family: Adobe Heiti Std;
  font-weight: normal;
  font-size: 27rpx;
  color: #979797;
}

.kucunright {
  flex: 1;
  text-align: left;
  font-family: Adobe Heiti Std;
  font-weight: normal;
  font-size: 27rpx;
  color: #000000;
}

.center {
  width: 100%;
  height: 21rpx;
  background: #f9f9fb;
}

.pinglun {
  width: 100%;
  background: #ffffff;
  padding: 35rpx;
}

.pingluntitle {
  width: 100%;
  height: 28rpx;
  line-height: 28rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pingluntitleleft {
  width: 50%;
  height: 28rpx;
  font-family: PingFang;
  font-weight: 500;
  font-size: 27rpx;
  color: #08132a;
}

.pingluntitleright {
  flex: 1;
  height: 100%;
  font-family: PingFang;
  font-weight: 500;
  font-size: 25rpx;
  color: #c5c9d2;
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: flex-end;

  .accrow {
    display: inline-block;
    width: 13rpx;
    height: 28rpx;
    background: url("../../static/businessImg/righticon.png") no-repeat;
    background-size: 100% 100%;
    margin-left: 10rpx;
  }
}

.pinglunlist {
  width: 100%;
  margin-top: 20rpx;
}

.pinglunlisticon {
  width: 48rpx;
  height: 48rpx;
  display: inline-block;
}

.pinglunname {
  height: 48rpx;
  line-height: 48rpx;
  font-family: PingFang;
  font-weight: 500;
  font-size: 27rpx;
  color: #000000;
  margin-left: 19rpx;
  display: inline-block;
}

.pinglunzhuti {
  width: 610rpx;
  font-family: PingFang;
  font-weight: 500;
  font-size: 25rpx;
  color: #323e46;
  line-height: 40rpx;
  margin-left: 67rpx;
}

.shangpinxiangqing {
  width: 100%;

  height: 30rpx;
  font-family: PingFang;
  font-weight: 500;
  font-size: 29rpx;
  color: #08132a;
  line-height: 2rpx;
  text-align: center;
  margin-top: 78rpx;
}

.xiangqingtupian {
  width: 100%;
  padding: 35rpx;
}

/deep/ .u-swiper-indicator {
  bottom: 60rpx !important;
}

/deep/ .u-mode-center-box {
  border-radius: 20rpx;
}

.popcenter {
  width: 567rpx;
  height: 267rpx;
  background: #ffffff;
  border-radius: 20rpx;
}

.popcenter2 {
  width: 567rpx;
  height: 450rpx;
  background: #ffffff;
  border-radius: 20rpx;
}

.pop_title {
  width: 100%;
  text-align: center;
  font-family: Source Han Sans CN;
  font-weight: 400;
  font-size: 35rpx;
  color: #151f38;
  padding-top: 47rpx;
}

.pop_bottom_list {
  width: 100%;
  display: flex;
  height: 86rpx;
  justify-content: space-around;
  align-items: center;
  margin-top: 65rpx;
}

.pop_bottom_list_quxiao {
  background: rgb(246, 247, 250);
  width: 237rpx;
  height: 86rpx;
  line-height: 86rpx;
  text-align: center;
}

.pop_bottom_list_queren {
  width: 237rpx;
  height: 86rpx;
  line-height: 86rpx;
  text-align: center;
  background: rgb(234, 245, 215);
  color: #94cf39;
}

.pop_cneter {
  width: 501rpx;
  height: 94rpx;
  background: rgb(246, 247, 250);
  margin: 0 auto;
  margin-top: 40rpx;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.pop_cneter_label {
  width: 122rpx;
  height: 27rpx;
  font-family: Adobe Heiti Std;
  font-weight: normal;
  font-size: 28rpx;
  color: #10132a;
  line-height: 27rpx;
}

.pop_cneter_input {
  width: 303rpx;
  height: 27rpx;
  display: flex;
  align-items: center;
  border-bottom: 1rpx solid;

  input {
    height: 27rpx;
    font-size: 28rpx;
  }
}
</style>
